<template>
  <view>
    <view class="top">
      <view>
        <!--        <region-picker @change="changeRegin" :value="region" :json-data="zonestree">-->
        <!--          选择城市-->

        <!--          <image src="/static/pages/img/大于号.png" class="dyh"></image>-->
        <!--        </region-picker>-->
        <picker @change="changeRegin" :value="region" :range="zonestree" range-key="name">
          <view class="uni-input">选择城市</view>
        </picker>
      </view>
      <view class="ss">
        <image src="/static/pages/img/搜索.png" class="sousuo"></image>
        <input class="input_md" type="text" placeholder="搜索门店"/>
      </view>
      <view class="dt_" @tap="gotuditu">
        <view>
          <image src="/static/pages/img/地图.png" class="dt_tp"></image>
        </view>

        <view class="text_dt">
          <view>地图</view>
        </view>
      </view>
    </view>

    <view class="body">
      <view class="liebiao" v-for="(mdl, index) in mendian" :key="index">
        <view class="md" @tap="selstore(mdl.id)">
          <view class="md_tp">
            <view class="mdl_tp" :style="'background-image: url(' + mdl.banner_list[0] + ');'">
              <view class="zhuangtaikuang">
                <view v-if="mdl.is_room_status == '0'">
                  <view class="ztk_text">营业中</view>
                </view>

                <view v-if="mdl.is_room_status == '1'">
                  <view class="ztk_text">休息中</view>
                </view>
              </view>

              <view class="dingkuang">
                <view>订</view>
              </view>

<!--              <view class="fuwukuang">-->
<!--                <view class="fuwu_kk" v-for="(fw, index1) in mdl.select_name" :key="index1">-->
<!--                  <view>{{ mdl.select_name }}</view>-->
<!--                </view>-->
<!--              </view>-->
            </view>
          </view>

          <view class="h1">
            <h1 class="mdl_h1">{{ mdl.name }}</h1>
            <image class="h1_dh" src="/static/pages/img/电话.png" @click.stop="calltel(mdl.tel)"></image>
          </view>
          <view class="h2" style="padding-bottom: 2px">
            <view class="h2_text">
              <text class="h2_text_1">{{ mdl.address }}</text>
            </view>
            <text class="h2_dh" @click.stop="navigationtl(mdl.lat,mdl.lng,mdl.name,mdl.address)">导航</text>
          </view>
          <view class="h2">
            <view class="h2_text">
              <text class="h2_text_2" style="padding-left: 0">距我{{ mdl.distance }}km</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <suspend></suspend>
  </view>
</template>

<script>
import {area_list, storelist} from '../../common/api';
import Suspend from "@/components/suspend/Suspend.vue";

export default {
  components: {Suspend},
  data() {
    return {
      mendian: [],
      ditushuju: [],
      region: '',
      area_id: '',
      zonestree: [],
      mdl: {
        id: '',
        banner_list: '',
        is_room_status: '',
        select_name: [],
        name: '',
        address: '',
        member_price: ''
      }
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad: function (options) {

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getarea()
    this.getstorelist()
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  },
  methods: {
    // 跳转地图页
    gotuditu() {
      uni.navigateTo({
        url: "/packageC/ditu/ditu?ditudata=" + JSON.stringify(this.ditushuju)
      });
    },
    // 获取店铺列表
    getstorelist() {
      let _this = this
      //获取当前的位置坐标
      uni.getLocation({
        type: 'wgs84',
        success: function (res) {
          // 获取店铺列表
          storelist({
            area_id: _this.area_id,
            lng: res.longitude,
            lat: res.latitude
          }, (res) => {
            if (res.data.code == 0) {
              _this.setData({
                mendian: res.data.data
              });
              _this.ditushuju = []
              res.data.data.forEach((item, index) => {
                _this.ditushuju.push({
                  id: index,
                  latitude: item.lat,//纬度
                  longitude: item.lng,//经度
                  callout: {//自定义标记点上方的气泡窗口 点击有效
                    content: item.name,//文本
                    address: item.address,//文本
                    color: '#ffffff',//文字颜色
                    fontSize: 14,//文本大小
                    borderRadius: 15,//边框圆角
                    padding: '10',
                    bgColor: '#4CB86CFF',//背景颜色
                    display: 'ALWAYS',//常显
                  },
                })
                console.log('生命周item', item);
              })
            }
            console.log('生命周期函数--监听页面加载', res, res.data.code);
          });
        },
        fail: (err) => {
          uni.showModal({
            title: "获取位置失败",
          })
        }
      });

    },
    // 获取地区
    getarea() {
      area_list(res => {
        res.data.data.list.forEach(item => {
          this.zonestree.push({...item, code: item.id})
        })
        console.log('getarea', this.zonestree, res)
      })
    },
    // 选择店铺
    selstore(id) {
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2]; // 上一个页面
      uni.navigateBack({
        delta: 1,
        success: () => {
          prevPage.$vm.backredd(id); // 直接调用上个页面的刷新方法
        }
      });
    },
    // 定位导航
    navigationtl(lat, lng, name, address) {
      console.log('navigationl', lat, lng)
      uni.openLocation({
        name: name, address: address,
        latitude: parseFloat(lat),
        longitude: parseFloat(lng),
        success: function () {
          console.log('openLocation-success');
        }
      });
    },
    // 打电话
    calltel(tel) {
      uni.makePhoneCall({
        // 手机号 这里可以直接写号码如 12345 也可以写获取号码的字段如this.mobile
        phoneNumber: tel
      });
    },
    // 地区切换
    changeRegin(e) {
      console.log('changeRegin', e)
      this.setData({
        region: e.detail.value
      });
      this.area_id = this.zonestree[this.region]['id']
      this.getstorelist()
    }
  }
};
</script>
<style>
.top {
  display: flex; /* 使用Flexbox布局 */
  font-size: 14px; /* 将字体大小设为14px */
  margin: 20rpx;
  padding-left: 20rpx;
  justify-content: flex-start;
  align-items: center;
}

.ss {
  margin-left: 10rpx;
  width: 400rpx;
  height: 90rpx;
  padding-left: 14rpx;
  display: flex; /* 使用Flexbox布局 */
  background-color: rgb(245, 243, 243); /* 设置输入框背景色为灰色 */
  border-radius: 5px; /* 圆角设置为20px */
  justify-content: flex-start;
  align-items: center;
}

.sousuo {
  width: 60rpx;
  height: 60rpx;
}

.dyh {
  width: 20rpx;
  height: 20rpx;
}

.dt_ {
  display: flex;
  margin-left: 10rpx;
  justify-items: center; /* 子元素水平居中 */
}

.dt_tp {
  width: 50rpx;
  height: 50rpx;
}

.text_dt {
  margin-top: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body {
  background-color: #ccc; /* 设置输入框背景色为灰色 */
  height: auto;
  padding: 30rpx 0 0 0;
}

.liebiao {
  margin: 0 25rpx 30rpx 25rpx;
}

.md {
  width: 700rpx;
  height: 500rpx;
  top: 30rpx;
  left: 25rpx;
  background-color: white; /* 设置输入框背景色为灰色 */
  border-radius: 8px; /* 圆角设置为px */
}

.mdl_tp {
  width: 100%;
  height: 300rpx;
}

.h1 {
  padding: 20rpx 30rpx 20rpx 20rpx;
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
}

.mdl_h1 {
  font-weight: bold;
  font-size: 35rpx; /* 将字体大小设为14px */
}

.h1_dh {
  width: 40rpx;
  height: 40rpx;
}

.h2 {
  padding: 0rpx 30rpx 20rpx 20rpx;
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
  font-size: 14px; /* 将字体大小设为14px */
  line-height: 1.5;
  font-family: Arial, sans-serif;
}

.h2_text {
  width: 88%;
}

.h2_text_1 {
  color: #a3a2a2;
}

.h2_text_2 {
  padding-left: 10rpx;
  color: rgb(57, 127, 255);
  font-size: 12px; /* 将字体大小设为14px */
}

.h2_dh {
  color: rgb(57, 127, 255);
}

.cs_xzq {
  display: flex;
}

.zhuangtaikuang {
  padding: 20rpx;
}

.ztk_text {
  padding: 5rpx 10rpx;
  width: 100rpx;
  height: 50rpx;
  background-color: rgba(255, 255, 255, 0.781);
  border-radius: 5rpx;
  font-size: 28rpx;
}

.dingkuang {
  background-color: rgb(76, 184, 108);
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
  margin-right: 20rpx;
  color: rgb(255, 255, 255);
  font-weight: bold;
  font-size: 40rpx;
}

.fuwukuang {
  margin: 140rpx 20rpx 0rpx 20rpx;
  display: flex;
  align-items: center;
}

.fuwu_kk {
  background-color: rgb(30, 31, 31, 0.5);
  color: rgb(255, 255, 255);
  border-radius: 8rpx;
  margin-right: 10rpx;
  font-size: 25rpx;
  padding: 8rpx;
}
</style>
